<template>
  <div class="">
    <div style="display: flex;width:100%;justify-content: center;">
      <div class="point-con" v-for="(item, index) in processList" :key="index">
        <div style="display: flex;align-items:center;">
          <div
            class="point-sty"
            :style="{
              background:
                item.pointStatus === 2 ||
                item.pointStatus === 6 ||
                item.pointStatus === 1
                  ? '#40AA1C'
                  : item.pointStatus === 5
                  ? '#EE9B39'
                  : item.pointStatus === 3
                  ? '#F90000'
                  : '#D8D8D8',
            }"
          ></div>
          <div
            :style="{
              border:
                item.pointStatus === 2 ||
                item.pointStatus === 6 ||
                item.pointStatus === 1
                  ? '1px solid #40AA1C'
                  : item.pointStatus === 5
                  ? ' 1px solid #EE9B39'
                  : ' 1px solid #D8D8D8',
            }"
            style="width:80%;height: 0px;"
            v-if="index !== processList.length - 1"
          ></div>
          <div
            class="triangle-icon"
            :style="{
              'border-left':
                item.pointStatus === 2 ||
                item.pointStatus === 6 ||
                item.pointStatus === 1
                  ? ' 10px dashed #40AA1C'
                  : item.pointStatus === 5
                  ? '  10px dashed #EE9B39'
                  : ' 10px dashed #D8D8D8',
            }"
            v-if="index !== processList.length - 1"
          ></div>
        </div>
        <div style="font-weight:700;padding:5px 0;font-size: 14px;">
          {{ item.pointName }}
        </div>
        <div
          style="padding:5px 0"
          :style="{
            color:
              item.pointStatus === 2 ||
              item.pointStatus === 6 ||
              item.pointStatus === 1
                ? '#40AA1C'
                : item.pointStatus === 5
                ? '#EE9B39'
                : item.pointStatus === 3
                ? '#F90000'
                : '#000',
          }"
        >
          {{ dictionary["point_status"][item.pointStatus] }}
        </div>
        <div style="font-weight: bold;">{{ item.userName }}</div>
        <div style="padding:5px 0 ">{{ item.pointTime }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "index",
  props: ["processList"],
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["dictionary", "dictionaryArr"]),
  },
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped lang="scss">
.triangle-icon {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 5px dashed transparent;
  border-bottom: 5px dashed transparent;
}
.point-con {
  width: 180px;
}
.point-sty {
  border-radius: 50%;
  width: 28px;
  height: 28px;
}
</style>
